<!--<template>-->
<!--    <div>-->
<!--        <baidu-map class="map" :center="map.center" :zoom="map.zoom" @ready="handler">-->
<!--            &lt;!&ndash;缩放&ndash;&gt;-->
<!--            <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>-->
<!--            &lt;!&ndash;定位&ndash;&gt;-->
<!--            <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true"-->
<!--                            :autoLocation="true"></bm-geolocation>-->
<!--            &lt;!&ndash;点&ndash;&gt;-->
<!--            <bm-marker :position="map.center" :dragging="map.dragging" animation="BMAP_ANIMATION_DROP">-->
<!--                &lt;!&ndash;提示信息&ndash;&gt;-->
<!--                <bm-info-window :show="map.show">Hello~</bm-info-window>-->
<!--            </bm-marker>-->
<!--        </baidu-map>-->
<!--    </div>-->
<!--</template>-->

<!--<script>-->

<!--    export default {-->
<!--        name: "baiduMapTest",-->
<!--        data() {-->
<!--            return {-->
<!--                map: {-->
<!--                    center: {lng: 121.4472540000, lat: 31.3236200000},-->
<!--                    zoom: 15,-->
<!--                    show: true,-->
<!--                    dragging: true-->
<!--                },-->
<!--            }-->
<!--        },-->
<!--        methods: {-->
<!--            handler({BMap, map}) {-->
<!--                //let me = this;-->
<!--                console.log("BMap is:",BMap,"map is:",map);-->
<!--                // 鼠标缩放-->
<!--                map.enableScrollWheelZoom(true);-->
<!--                // map.setHeading(64.5);          //设置地图旋转角度-->
<!--                // map.setTilt(73);             //设置地图的倾斜角度-->
<!--                // 点击事件获取经纬度-->


<!--                var styleJson = [-->
<!--                    {-->
<!--                        "featureType": "land",-->
<!--                        "elementType": "geometry",-->
<!--                        "stylers": {-->
<!--                            "visibility": "on",-->
<!--                            "color": "#091220ff"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "water",-->
<!--                        "elementType": "geometry",-->
<!--                        "stylers": {-->
<!--                            "visibility": "on",-->
<!--                            "color": "#113549ff"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "green",-->
<!--                        "elementType": "geometry",-->
<!--                        "stylers": {-->
<!--                            "visibility": "on",-->
<!--                            "color": "#0e1b30ff"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "building",-->
<!--                        "elementType": "geometry",-->
<!--                        "stylers": {-->
<!--                            "visibility": "on"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "building",-->
<!--                        "elementType": "geometry.fill",-->
<!--                        "stylers": {-->
<!--                            "color": "#ffffffb3"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "building",-->
<!--                        "elementType": "geometry.stroke",-->
<!--                        "stylers": {-->
<!--                            "color": "#dadadab3"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "subwaystation",-->
<!--                        "elementType": "geometry",-->
<!--                        "stylers": {-->
<!--                            "visibility": "on",-->
<!--                            "color": "#b15454B2"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "education",-->
<!--                        "elementType": "geometry",-->
<!--                        "stylers": {-->
<!--                            "visibility": "on",-->
<!--                            "color": "#e4f1f1ff"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "medical",-->
<!--                        "elementType": "geometry",-->
<!--                        "stylers": {-->
<!--                            "visibility": "on",-->
<!--                            "color": "#f0dedeff"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "scenicspots",-->
<!--                        "elementType": "geometry",-->
<!--                        "stylers": {-->
<!--                            "visibility": "on",-->
<!--                            "color": "#e2efe5ff"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "highway",-->
<!--                        "elementType": "geometry",-->
<!--                        "stylers": {-->
<!--                            "visibility": "on",-->
<!--                            "weight": 4-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "highway",-->
<!--                        "elementType": "geometry.fill",-->
<!--                        "stylers": {-->
<!--                            "color": "#f7c54dff"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "highway",-->
<!--                        "elementType": "geometry.stroke",-->
<!--                        "stylers": {-->
<!--                            "color": "#fed669ff"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "highway",-->
<!--                        "elementType": "labels",-->
<!--                        "stylers": {-->
<!--                            "visibility": "on"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "highway",-->
<!--                        "elementType": "labels.text.fill",-->
<!--                        "stylers": {-->
<!--                            "color": "#8f5a33ff"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "highway",-->
<!--                        "elementType": "labels.text.stroke",-->
<!--                        "stylers": {-->
<!--                            "color": "#ffffffff"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "highway",-->
<!--                        "elementType": "labels.icon",-->
<!--                        "stylers": {-->
<!--                            "visibility": "on"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "arterial",-->
<!--                        "elementType": "geometry",-->
<!--                        "stylers": {-->
<!--                            "visibility": "on",-->
<!--                            "weight": 2-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "arterial",-->
<!--                        "elementType": "geometry.fill",-->
<!--                        "stylers": {-->
<!--                            "color": "#d8d8d8ff"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "arterial",-->
<!--                        "elementType": "geometry.stroke",-->
<!--                        "stylers": {-->
<!--                            "color": "#ffeebbff"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "arterial",-->
<!--                        "elementType": "labels",-->
<!--                        "stylers": {-->
<!--                            "visibility": "on"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "arterial",-->
<!--                        "elementType": "labels.text.fill",-->
<!--                        "stylers": {-->
<!--                            "color": "#525355ff"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "arterial",-->
<!--                        "elementType": "labels.text.stroke",-->
<!--                        "stylers": {-->
<!--                            "color": "#ffffffff"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "local",-->
<!--                        "elementType": "geometry",-->
<!--                        "stylers": {-->
<!--                            "visibility": "on",-->
<!--                            "weight": 1-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "local",-->
<!--                        "elementType": "geometry.fill",-->
<!--                        "stylers": {-->
<!--                            "color": "#d8d8d8ff"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "local",-->
<!--                        "elementType": "geometry.stroke",-->
<!--                        "stylers": {-->
<!--                            "color": "#ffffffff"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "local",-->
<!--                        "elementType": "labels",-->
<!--                        "stylers": {-->
<!--                            "visibility": "on"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "local",-->
<!--                        "elementType": "labels.text.fill",-->
<!--                        "stylers": {-->
<!--                            "color": "#979c9aff"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "local",-->
<!--                        "elementType": "labels.text.stroke",-->
<!--                        "stylers": {-->
<!--                            "color": "#ffffffff"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "railway",-->
<!--                        "elementType": "geometry",-->
<!--                        "stylers": {-->
<!--                            "visibility": "on",-->
<!--                            "weight": 1-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "railway",-->
<!--                        "elementType": "geometry.fill",-->
<!--                        "stylers": {-->
<!--                            "color": "#123c52ff"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "railway",-->
<!--                        "elementType": "geometry.stroke",-->
<!--                        "stylers": {-->
<!--                            "color": "#12223dff"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "subway",-->
<!--                        "elementType": "geometry",-->
<!--                        "stylers": {-->
<!--                            "visibility": "on",-->
<!--                            "weight": 1-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "subway",-->
<!--                        "elementType": "geometry.fill",-->
<!--                        "stylers": {-->
<!--                            "color": "#d8d8d8ff"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "subway",-->
<!--                        "elementType": "geometry.stroke",-->
<!--                        "stylers": {-->
<!--                            "color": "#ffffff00"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "subway",-->
<!--                        "elementType": "labels",-->
<!--                        "stylers": {-->
<!--                            "visibility": "on"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "subway",-->
<!--                        "elementType": "labels.text.fill",-->
<!--                        "stylers": {-->
<!--                            "color": "#979c9aff"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "subway",-->
<!--                        "elementType": "labels.text.stroke",-->
<!--                        "stylers": {-->
<!--                            "color": "#ffffffff"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "continent",-->
<!--                        "elementType": "labels",-->
<!--                        "stylers": {-->
<!--                            "visibility": "on"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "continent",-->
<!--                        "elementType": "labels.icon",-->
<!--                        "stylers": {-->
<!--                            "visibility": "on"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "continent",-->
<!--                        "elementType": "labels.text.fill",-->
<!--                        "stylers": {-->
<!--                            "color": "#333333ff"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "continent",-->
<!--                        "elementType": "labels.text.stroke",-->
<!--                        "stylers": {-->
<!--                            "color": "#ffffffff"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "city",-->
<!--                        "elementType": "labels.icon",-->
<!--                        "stylers": {-->
<!--                            "visibility": "on"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "city",-->
<!--                        "elementType": "labels",-->
<!--                        "stylers": {-->
<!--                            "visibility": "on"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "city",-->
<!--                        "elementType": "labels.text.fill",-->
<!--                        "stylers": {-->
<!--                            "color": "#454d50ff"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "city",-->
<!--                        "elementType": "labels.text.stroke",-->
<!--                        "stylers": {-->
<!--                            "color": "#ffffffff"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "town",-->
<!--                        "elementType": "labels.icon",-->
<!--                        "stylers": {-->
<!--                            "visibility": "on"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "town",-->
<!--                        "elementType": "labels",-->
<!--                        "stylers": {-->
<!--                            "visibility": "on"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "town",-->
<!--                        "elementType": "labels.text.fill",-->
<!--                        "stylers": {-->
<!--                            "color": "#454d50ff"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "town",-->
<!--                        "elementType": "labels.text.stroke",-->
<!--                        "stylers": {-->
<!--                            "color": "#ffffffff"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "road",-->
<!--                        "elementType": "geometry.fill",-->
<!--                        "stylers": {-->
<!--                            "color": "#12223dff"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "poilabel",-->
<!--                        "elementType": "labels",-->
<!--                        "stylers": {-->
<!--                            "visibility": "on"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "districtlabel",-->
<!--                        "elementType": "labels",-->
<!--                        "stylers": {-->
<!--                            "visibility": "off"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "road",-->
<!--                        "elementType": "geometry",-->
<!--                        "stylers": {-->
<!--                            "visibility": "on"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "road",-->
<!--                        "elementType": "labels",-->
<!--                        "stylers": {-->
<!--                            "visibility": "off"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "road",-->
<!--                        "elementType": "geometry.stroke",-->
<!--                        "stylers": {-->
<!--                            "color": "#ffffff00"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "district",-->
<!--                        "elementType": "labels",-->
<!--                        "stylers": {-->
<!--                            "visibility": "off"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "poilabel",-->
<!--                        "elementType": "labels.icon",-->
<!--                        "stylers": {-->
<!--                            "visibility": "off"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "poilabel",-->
<!--                        "elementType": "labels.text.fill",-->
<!--                        "stylers": {-->
<!--                            "color": "#2dc4bbff"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "poilabel",-->
<!--                        "elementType": "labels.text.stroke",-->
<!--                        "stylers": {-->
<!--                            "color": "#ffffff00"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "manmade",-->
<!--                        "elementType": "geometry",-->
<!--                        "stylers": {-->
<!--                            "color": "#12223dff"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "districtlabel",-->
<!--                        "elementType": "labels.text.stroke",-->
<!--                        "stylers": {-->
<!--                            "color": "#ffffffff"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "entertainment",-->
<!--                        "elementType": "geometry",-->
<!--                        "stylers": {-->
<!--                            "color": "#ffffffff"-->
<!--                        }-->
<!--                    }, {-->
<!--                        "featureType": "shopping",-->
<!--                        "elementType": "geometry",-->
<!--                        "stylers": {-->
<!--                            "color": "#12223dff"-->
<!--                        }-->
<!--                    }-->
<!--                ];-->
<!--                // map.setMapStyleV2({-->
<!--                //     styleId: '3d71dc5a4ce6222d3396801dee06622d'-->
<!--                // });-->
<!--                map.setMapStyle({ styleJson: styleJson },{styleId:'3d71dc5a4ce6222d3396801dee06622d'});-->
<!--                map.addEventListener('click', function (e) {-->
<!--                    console.log(e.point.lng, e.point.lat)-->
<!--                })-->
<!--            }-->
<!--        }-->
<!--    }-->
<!--</script>-->

<!--<style scoped>-->
<!--    .map {-->
<!--        width: 100%;-->
<!--        height: 800px;-->
<!--    }-->
<!--</style>-->